<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>受控组件</title>
</head>
<body>
    <div id="test"></div>
    <!-- 准备好一个容器-->
    
    <!--引入react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--引入react.dom 用于支持react操作dom-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--引入bable 用于将jsx转换为js-->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
    //非受控组件： 现用现取
    //创建组件
    class Login extends React.Component{
        render(){
            return(
            <form action="http://baidu.com" onSubmit={this.handleSubmit}>
            用户名:<input type="text" onChange={this.saveUsername} ref={c=>this.username=c} name="username" / >
            密码: <input type="password" onChange={this.savePassword} ref={c=>this.password=c} name="password" />
            <button>登录 </button>
        </form>
            )
        }
        //初始化状态
        state={
            username:'',//用户名
            password:''
        }
        saveUsername=(event)=>{
         this.setState({username:event.target.value});
        }
        savePassword=(event)=>{
          this.setState({password:event.target.value});
        }
        handleSubmit=(event)=>{
            event.preventDefault()//阻止默认事件
            const {username,password}=this.state;

            // const{username,password}=this;
             alert(`你输入的用户名是${username},你输入的密码是${password}`);
        }
    }

    
    //渲染组件
    ReactDOM.render(<Login/>,document.getElementById('test'));
    </script>
</body>
</html>